import {BaseEventOrig, FormProps, View} from "@tarojs/components";
import Taro, {useLoad} from "@tarojs/taro";
import {useState} from "react";
import {DictItem} from "@/types";
import http from "@/request";
import "@taroify/core/button/style"
import Button from "@taroify/core/button"
import {Cell, Form} from "@taroify/core"
import {PickerOptionData} from "@taroify/core/picker/picker.shared";
import {HideLoading, ShowLoading, ShowToast} from "@/utils";
import FormPicker from "@/pages/order-success/formPicker";
import FormUpload from "@/pages/order-success/formUpload";
import "./index.scss"
import FormInput from "@/pages/order-success/formInput";

interface optionConfigType {
    tearms: PickerOptionData[],
    bizTypes: PickerOptionData[],
    comboIds: PickerOptionData[],
    gifts: PickerOptionData[]
}

const OrderSuccess: React.FC = () => {

    const [optionConfig, setOptionConfig] = useState<optionConfigType>({
        tearms: [],
        bizTypes: [],
        comboIds: [],
        gifts: []
    })

    const setOptionByKey = (key: string, val: DictItem[]) => {
        setOptionConfig((optionConfig) => ({
            ...optionConfig,
            [key]: val
        }))
    }
    const operateDataList = () => {
        return [
            {
                label: '团队',
                labelKey: 'teamName',
                url: '/disp/biz/team/page',
                dictName: 'tearms'
            },
            {
                label: '业务类型',
                labelKey: 'name',
                url: '/disp/biz/operation/pageBizType',
                dictName: 'bizTypes'
            },
            {
                label: '套餐',
                labelKey: 'name',
                url: '/disp/biz/operation/pageCombo',
                dictName: 'comboIds'
            },
            {
                label: '礼品',
                labelKey: 'name',
                url: '/disp/biz/operation/pageGift',
                dictName: 'gifts'
            }
        ].map(requestItem => {
            return http.post(requestItem.url, {
                pageNum: 1,
                pageSize: 9999,
                status: 'Enable'
            }).then(res => {
                const options = (res.data.list || []).map((item: Record<string, string>) => {
                    return {
                        value: item.id,
                        label: item[requestItem.labelKey]
                    }
                })
                setOptionByKey(requestItem.dictName, options)
            })
        })
    }
    useLoad(() => {
        operateDataList()
        const order = Taro.getStorageSync('success-order-info')
        Object.keys(formData).forEach(key => {
            setFormValue(key, order[key])
        })
        setFormValue('id', order.id)

    })

    const [formData, setFormData] = useState<{
        [key: string]: any,
        customerHandheldImgList?: string[]
        customerVideoUrlList?: string[]
        orderCodeImgList?: string[]
        phoneSerialImgList?: string[]
    }>({
        id: '',
        bizTypeId: '',
        comboId: '',
        processedComboId: '',
        preRegistrationNumber: '',
        processedCustomerName: '',
        freezeAmount: '',
        processingDetail: '',
        giftId: '',
        orderComment: '',
        otherImgList: '',
        phoneSource: '',
        salesModels: '',
        processingMainNumber: '',
        customerHandheldImgList: [],
        customerVideoUrlList: [],
        orderCodeImgList: [],
        phoneSerialImgList: []
    })

    const setFormValue = (key: string, val: any) => {
        setFormData(data => {
            return {
                ...data,
                [key]: val
            }
        })
    }
    const onSubmit = (event: BaseEventOrig<FormProps.onSubmitEventDetail>) => {
        const formValues = event.detail.value || {}
        formValues.id = formData.id || undefined
        ShowLoading()
        http.post(formValues.id ? '/disp/biz/order/updateSuccessOrder' : '/disp/biz/order/successOrder', formValues).then(() => {
            ShowToast('操作成功')
            Taro.navigateBack()
        }).catch(err => {
            ShowToast(err.msg || '操作失败！')
        }).finally(() => {
            HideLoading()
        })
    }

    return (<View className="page">
        <Form onSubmit={onSubmit}>
            <Cell.Group inset>
                <FormPicker
                    name={'bizTypeId'}
                    label={'业务类型'}
                    rules={[{ required: true, message: "请选择业务类型" }]}
                    options={optionConfig.bizTypes}
                    initVal={formData.bizTypeId}
                />
                <FormPicker
                    name={'comboId'}
                    label={'套餐'}
                    rules={[{ required: true, message: "请选择套餐" }]}
                    options={optionConfig.comboIds}
                    initVal={formData.comboId}
                />
                <FormPicker
                    name={'giftId'}
                    label={'赠品'}
                    rules={[{ required: false, message: "请选择赠品" }]}
                    options={optionConfig.gifts}
                    initVal={formData.giftId}
                />
                <FormPicker
                    name={'processedComboId'}
                    label={'办理套餐'}
                    rules={[{ required: true, message: "请选择办理套餐" }]}
                    options={optionConfig.comboIds}
                    initVal={formData.processedComboId}
                />
                <FormInput label={'办理客户'} name={'processedCustomerName'} initVal={formData.processedCustomerName} rules={[{ required: true, message: "请输入办理客户姓名" }]}/>
                <FormInput label={'办理主号'} name={'processingMainNumber'} initVal={formData.processingMainNumber}/>
                <FormInput label={'预登记单号'} name={'preRegistrationNumber'} initVal={formData.preRegistrationNumber}/>
                <FormInput label={'冻结金额'} name={'freezeAmount'} initVal={formData.freezeAmount}/>
                <FormInput label={'销售机型'} name={'salesModels'} initVal={formData.salesModels}/>
                <FormInput label={'手机来源'} name={'phoneSource'} initVal={formData.phoneSource}/>
                <FormInput label={'办理情况'} name={'processingDetail'} initVal={formData.processingDetail}/>
                <FormInput label={'备注'} name={'orderComment'} initVal={formData.orderComment}/>
                <FormUpload
                    orderId={formData.id}
                    initVal={formData.phoneSerialImgList || []}
                    name={'phoneSerialImgList'} label={'手机串码'}/>
                <FormUpload
                    orderId={formData.id}
                    initVal={formData.orderCodeImgList || []}
                    name={'orderCodeImgList'} label={'竣工号'}/>
                <FormUpload
                    orderId={formData.id}
                    initVal={formData.customerHandheldImgList || []}
                    name={'customerHandheldImgList'} label={'客户手持照'}/>
                <FormUpload
                    orderId={formData.id}
                    initVal={formData.otherImgList || []}
                    name={'otherImgList'} label={'其他'}/>
                <FormUpload
                    orderId={formData.id}
                    initVal={formData.customerVideoUrlList || []}
                    name={'customerVideoUrlList'}
                    type={'video'} label={'视频'}/>
            </Cell.Group>
            <View style={{ margin: "16px" }}>
                <Button shape="round" block color="primary" formType="submit">
                    提交
                </Button>
            </View>
        </Form>
        {/*<Cell.Group inset>
        </Cell.Group>*/}
        {/*<View style={{ margin: "16px" }}>*/}
        {/*    <Button shape="round" block color="primary" onClick={submitData}>*/}
        {/*        提交*/}
        {/*    </Button>*/}
        {/*</View>*/}
    </View>)
}
export default OrderSuccess;